<template>
    <el-table :data="data" highlight-current-row border style="width: 100%" @selection-change="selectChange">
        <el-table-column type="selection" width="50" align="center" :selectable="checkBox"> </el-table-column>
        <el-table-column label="序号" type="index" width="80" align="center"> </el-table-column>
        <el-table-column v-for="item in formDefinition" :key="item.name" :prop="item.name" :label="item.title"
            :width="item.width" align="center">
            <template slot-scope="props">
                <el-switch v-if="item.name === 'isEnable'" v-model="props.row[item.name]" active-color="#13ce66"
                    @change="isEnableChange($event, props.row)" :disabled="props.row.companyId === 0"/>
                <span v-else>{{ props.row[item.name] }}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="220">
            <template slot-scope="scope">
                <el-button @click.native.prevent="update(scope.row)" type="text" size="small" v-if="$auth.checkMenuPermissions('system:role:update')">
                    修改
                </el-button>
                <el-button v-if="scope.row.companyId !== 0 && $auth.checkMenuPermissions('system:role:delete')" @click.native.prevent="del(scope.row)" type="text" size="small">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script>
import { roleIsEnable } from '@/api/system/roleApi'
export default {
    props: {
        //渲染组件使用的数据集
        data: {
            type: Array,
            required: false,
        },
        /**
         * 数据表格式定义
         * title: 数据表格的标题
         * name:  后端返回要渲染的字段名称
         * width: 当前数据占用列的宽度
         */
        formDefinition: {
            type: Array,
            required: true,
            default: [{ title: "标题", name: "field", width: "180" }]
        },
    },
    methods: {
        //勾选功能
        selectChange(row) {
            let ids = row.map(r => r.roleId);
            this.$emit('optionRowIds', ids);
        },
        //检查是否可勾选
        checkBox(row, index) {
            return row.companyId !== 0
        },
        update(scope) {
            this.$emit('update', scope.roleId)
        },
        del(scope) {
            this.$emit('del', scope.roleId)
        },
        //启用状态发送变更
        isEnableChange(event, row) {
            if (event) {
                roleIsEnable(row.roleId, event).then(data => { }).catch(err => {
                    row.isEnable = !event;
                    this.$message.error(err);
                })
            } else {
                this.$confirm(`确认要停用 [ ${row.roleName} ] 角色?`, '操作确认', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消'
                }).then(() => {
                    roleIsEnable(row.roleId, event).then(data => { }).catch(err => {
                        row.isEnable = !event;
                        this.$message.error(err);
                    })
                }).catch(()=>{
                    row.isEnable = !event;
                })
            }
        },
    },
};
</script>
  
<style scoped lang="scss">
.el-table {
    margin-top: 18px;
    height: 70vh;
}
</style>
  